<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗剽悍的种子</title>
		<style>
			.box{
				margin: auto;
				
				width:1200px;
				height: 600px;
				position: relative;
			}
			.rotation{
				width: 1200px;
				height: 500px;
				margin:100px auto;
				
				
			}
			.rotation img{
				width: 100%;
				height: 100%;
			}
			.prev,.next{
				height: 50px;
				position: absolute;
				top: 260px;
				cursor: pointer;
				color: crimson;
			}
			.prev{
				left: 0px;
			}
			.next{
				right: 0px;
			}
		</style>
	</head>
	<body>
		
		<div id="app" class="box">
			<input class="prev" type="button" value="<" v-on:click="prev()" />
			<div class="rotation">
				<img :src="imgageName[index]" />
			</div>
			<input class="next" type="button"value=">" v-on:click="next()" />
		</div>
		
		<!-- <script src="js/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

		<script>
			new Vue({
				el:"#app",
				data:{
					imgageName:['http://www.lzy.edu.cn/images/wusihongqituanwei.png','http://www.lzy.edu.cn/img/swiper/lunbo0726.jpg','http://www.lzy.edu.cn/images/weixintupian_20220822202455.jpg','http://www.lzy.edu.cn/images/shuanggao.png']
					,index:0
				},
				methods:{
					next(){
						this.index++;
						if(this.index >= this.imgageName.length){
							this.index=0;
						}
					},
					prev(){
						this.index--;
						if(this.index < 0){
							this.index=this.imgageName.length-1;
						}
					}
				}
			})
		</script>
	</body>
</html>

